<template>
	<view class="forget-password">
		<view class="input-holder">
			<view class="title">
				若您忘记了密码，请在此重置密码（无表单验证，可以只输入用户名，重置密码为123456）
			</view>
			<view class="input">
				<input type="text" v-model="userData.username" placeholder="请输入用户名" />
			</view>
			<view class="input password">
				<template v-if="passwordShow">
					<view>
						<input type="text" v-model="userData.password" placeholder="请输入新密码" />
						<image src="/static/icons/view.png" mode="" @tap="changePasswordShow"></image>
					</view>
				</template>
				<template v-else>
					<view>
						<input type="password" v-model="userData.password" placeholder="请输入新密码" />
						<image src="/static/icons/no-view.png" mode="" @tap="changePasswordShow"></image>
					</view>
				</template>
			</view>
			<view class="input  code">
				<input type="text"  placeholder="验证码" />
				<view :class="{disable:isDisable}" class="text" @tap="getCode">
					{{codeText}}
				</view>
			</view>
		</view>

		<view class="login-btn" @tap="resetPassword">
			重置密码
		</view>
	</view>
</template>

<script>
	import {
		requestResetPassword
	} from 'api/user/login.js';
	export default {
		data() {
			return {
				userData: {
					username:'',
					password:''
				},
				passwordShow: false,
				codeText:'获取验证码',
				isDisable:false,
			};
		},
		methods:{
			changePasswordShow(){
				this.passwordShow = !this.passwordShow;
			},
			// 获取验证码
			getCode(){
				if(this.isDisable){
					return false;
				}
				uni.showToast({
					title:'模拟验证码倒计时',
					icon:'none',
					duration:2000
				})
				let num = 30;
				this.isDisable = true;
				let timer = setInterval(()=>{
					if(num<=0){
						this.codeText = '获取验证码';
						this.isDisable = false;
						clearInterval(timer);
						return
					}
					this.codeText = num--;
				},1000)
			},
			resetPassword(){
				if(this.userData.username){
					requestResetPassword(this.userData.username).then(res=>{
						console.log(res);
						if(res.code===20000){
							uni.showToast({
								title:'重置密码成功，为123456',
								icon:'success',
								duration:2000
							})
						}else{
							uni.showToast({
								title:res.message,
								icon:'none',
								duration:2000
							})
						}
					})
				}else{
					uni.showToast({
						title:'用户名不能为空',
						icon:'none',
						duration:2000
					})
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.forget-password {
		box-sizing: border-box;
		padding: 0 70rpx;
		min-height: 100vh;
		width: 100%;

		.input-holder {
			margin-top: 100rpx;

			.input {
				position: relative;

				input {
					box-sizing: border-box;
					margin-top: 32rpx;
					padding: 32rpx;
					height: 100rpx;
					width: 100%;
					border-radius: 50rpx;
					box-shadow: 0 0 30px 0 rgba(43, 86, 112, .1);
				}
			}

			.password {
				image {
					position: absolute;
					display: block;
					width: 50rpx;
					height: 32rpx;
					right: 36rpx;
					top: 36rpx;
				}
			}
			
			.code{
				.text{
					position: absolute;
					display: block;
					height: 32rpx;
					right: 36rpx;
					font-size: 24rpx;
					top: 36rpx;
				}
				
				.disable.text{
					color: #999;
				}
			}
		}

		.login-btn {
			box-sizing: border-box;
			margin-top: 100rpx;
			padding: 32rpx;
			height: 100rpx;
			width: 100%;
			font-size: 32rpx;
			color: rgb(255, 255, 255);
			border-radius: 50rpx;
			box-shadow: 0 0 30px 0 rgba(43, 86, 112, .1);
			background: rgb(53, 78, 68);
			text-align: center;
		}

	}
</style>
